<template>
	<view class="main">
		<view class="boxInfo">
			<view class="title">上传凭证</view>
			<view class="box-list">
				<view class="li">
					<view class="name">支付流水：</view>
					<view class="cont">{{payOrderNumber}}</view>
				</view>
				<view class="li">
					<view class="name">支付金额：</view>
					<view class="cont">{{money.toFixed(2)}}元</view>
				</view>
				<view class="li-upload">
					<view class="name">付款凭证：</view>
					<view class="cont">
						<u-upload :action="action" :file-list="fileList" :auto-upload="true" @on-success="upLoadSuccess" @on-uploaded="uploaded"></u-upload>
					</view>
				</view>
			</view>
		</view>
       <view class="boxInfo-two">
       	<view class="title"><view class="title-left">汇款信息</view><view class="copy-btn redColor" @tap="copyAll()">复制</view></view>
       	<view class="box-list">
       		<view class="li">
       			<view class="name">开户行：</view>
       			<view class="cont">招商银行股份有限公司</view>
				<view class="copy-btn" @tap="copyItem(1,'招商银行股份有限公司')">复制</view>
       		</view>
       		<view class="li">
       			<view class="name">开户支行：</view>
       			<view class="cont">招商银行深圳分行深圳天安云谷支行</view>
				<view class="copy-btn" @tap="copyItem(2,'招商银行深圳分行深圳天安云谷支行')">复制</view>
       		</view>
       		<view class="li">
       			<view class="name">开户名：</view>
       			<view class="cont">深圳中盈付数字科技有限公司</view>
       			<view class="copy-btn" @tap="copyItem(3,'深圳中盈付数字科技有限公司')">复制</view>
       		</view>
			<view class="li">
				<view class="name">开户账号：</view>
				<view class="cont">755961463510803</view>
				<view class="copy-btn" @tap="copyItem(4,'755961463510803')">复制</view>
			</view>
			<view class="li">
				<view class="name">汇款识别码：</view>
				<view class="cont">{{payOrderNumber}}</view>
				<view class="copy-btn" @tap="copyItem(5,payOrderNumber)">复制</view>
			</view>
       	</view>
       </view>
	  
	   <view class="box-three">
		   <view class="title">注意事项：</view>
		   <view class="cont">
			   <view class="tip">汇款时请注意一下信息，请牢记！</view>
			   <view class="tip-li">1.线下公司转账订单，一个识别码对应一个订单和相应的金 额，请勿多转账或者少转账。 </view>
			   <view class="tip-li">2.请在7天内付清款项，超过10天未对账系统自动会取消订 单，到账周期为3个工作日起。</view>
		   </view>
	   </view>
		<view class="bottom">
			<view class="bottom-left" @tap="backPage">在线支付</view>
			<view class="bottom-right" @tap="surePay">确认已经汇款</view>
		</view>
		
	</view>
</template>

<script>
	import {httpUrl} from "@/common/config.js"
	const app = getApp();
	const globalData = app.globalData;
	const apiUrl = globalData.wxApi;
	const wxImg = globalData.wxImg;
	import {
		getStoreData,
		dealNum,
		httpPost,
		bdMapToTxMap,
		txMapToBdMap,
	} from "@/utils/http.js";
	import mpMixin from "@/uni_modules/uview-ui/libs/mixin/mpMixin";
	export default {
		data() {
			return {
				fileList:[],
				action:httpUrl+'upload/voucher',
				money:0,
				serialNumber:"",
				orderNumber:"",
				picList:[],
				picStr:"",
				payOrderNumber:"",
				show:false
			};
		},
		onUnload() {
			
		},
		computed: {
		
		},
		onLoad(options) {
			console.log(options)
			this.money=Number(options.money);
		
			this.payOrderNumber=options.payOrderNumber;
		},
		methods: {
			copyAll(){
				let data='开户行：招商银行股份有限公司；开户支行：招商银行深圳分行深圳天安云谷支行；开户名：深圳中盈付数字科技有限公司；开户账号：755961463510803；汇款识别码：1710115850033303553';
				uni.setClipboardData({
					data: data,
					success: function () {
						console.log('success');
					}
				});
			},
			copyItem(val,data){
				uni.setClipboardData({
					data: data,
					success: function () {
						console.log('success');
					}
				});
			},
			backPage(){
				uni.navigateBack();
			},
			surePay(){
				let that=this;
				
				// if(this.serialNumber==""){
				// 	uni.showToast({
				// 		title: '流水号不能为空',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				if(this.payOrderNumber==""){
					uni.showToast({
						title: '订单号不能为空',
						icon: 'none'
					})
					return
				}
				//console.log('凭证',this.picList)
				
				if(this.picList.length==0){
					uni.showToast({
						title: '请上传凭证',
						icon: 'none'
					})
					return
				}
				let photoList=[];
				for(let i=0;i<this.picList.length;i++){
					photoList.push(this.picList[i].response.data[0].path+'/'+this.picList[i].response.data[0].name);
				}
				//console.log(photoList);
				this.$u.post('orderform/submitAudit',{
					 payOrderNumber:this.payOrderNumber,
					 paySerialNumber:this.payOrderNumber,
					 voucherPhoto:photoList.join(',')
				}).then(res=>{
					
					uni.showToast({
						title: '提交成功！'
					})
					setTimeout(() => {
						this.$u.route({
							type: 'back',
							delta: 2
						})
					}, 1500)
					
				})
			},
			upLoadSuccess(data, index, lists, name){
				//console.log('ddd',data,lists)
				
				//this.picList=lists;
			},
			uploaded(lists, name){
				//console.log(lists)
				
				this.picList=lists;
				
			}
			
		
		}
	}
</script>

<style lang="scss">
	.main{
		background-color: #F6F6F6;
		padding-top: 30rpx;
	}
	.boxInfo{
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding: 30rpx;
		border-radius: 20rpx;
		background-color: #fff;
		
		.title{
			font-size: 32rpx;
			font-weight: 600;
			border-bottom: 2rpx solid #f8f8f8;
			padding-bottom: 10rpx;
			margin-bottom: 10rpx;
		}
		.li{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			font-size: 24rpx;
			margin-bottom: 10rpx;
			.name{
				color: #b7b7b7;
			}
			.cont{
				color: #1f1f1f;
			}
		}
		.li-upload{
			font-size: 24rpx;
			.name{
				color: #b7b7b7;
			}
			.cont{
				color: #1f1f1f;
			}
		}
	}
	.boxInfo-two{
		margin-left: 30rpx;
		margin-right: 30rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 30rpx;
		margin-top: 30rpx;
		.title{
		
			border-bottom: 2rpx solid #f8f8f8;
			padding-bottom: 10rpx;
			margin-bottom: 10rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.title-left{
				font-size: 32rpx;
				font-weight: 600;
				
			}
			.copy-btn{
				font-size: 24rpx;
				border: 2rpx solid #b4b4b4;
				border-radius: 30rpx;
				padding: 6rpx 16rpx;
			}
			.redColor{
				color: #ff4975;
				border: 2rpx solid #ff4975;
			}
		}
		.li{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			font-size: 24rpx;
			margin-bottom: 10rpx;
			.copy-btn{
				font-size: 24rpx;
				border: 2rpx solid #b4b4b4;
				border-radius: 30rpx;
				padding: 6rpx 16rpx;
				margin-left: 10rpx;
			}
			.name{
				color: #b7b7b7;
				line-height: 48rpx;
				width: 144rpx;
			}
			.cont{
				color: #1f1f1f;
				line-height: 48rpx;
			}
		}
	}
	.box-three{
		margin-right: 30rpx;
		margin-left: 30rpx;
		background-color: #fff;
		margin-top: 30rpx;
		padding: 30rpx;
		border-radius: 20rpx;
		.title{
			font-size: 32rpx;
			font-weight: 600;
			color: #ff1c60;
			border-bottom: 2rpx solid #f8f8f8;
			margin-bottom: 10rpx;
			padding-bottom: 10rpx;
		}
		.cont{
			.tip{
				margin-top: 10rpx;
				
			}
			.tip-li{
				color: #c6c6c6;
				margin-top: 10rpx;
				font-size: 24rpx;
			}
		}
	}
	.bottom{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 30rpx;
		background-color: #fff;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		position: fixed;
		bottom: 0;
		
		width: calc(100% - 60rpx);
		
		.bottom-left{
			width: 330rpx;
			height: 86rpx;
			background-color: #d9d9d9;
			line-height: 86rpx;
			text-align: center;
			font-size: 30rpx;
		}
		.bottom-right{
			width: 330rpx;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			color: #fff;
			font-size: 30rpx;
			background: linear-gradient(to right,#fea457,#e62849);
		}
	}
</style>
